<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东-欢迎登录</title>
    <style>
        /* 使用通配符选择器进行内外边距情况 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 把全部的a标签去掉下划线 颜色改为#666*/
        a{
            text-decoration: none;
            color: #666;
        }
        a:hover{
            color: #E4393C !important;
            text-decoration: underline;
        }
        /* 顶部区域的样式 */
        .header{
            height: 80px;
            width: 1520px;
            margin: 0 auto;
        }
        /* 顶部区域左侧的样式 */
        .header .headerLeft{
            height: 60px;
            width: 300px;
            float: left;
            margin-left: 265px;
            margin-top: 10px;
        }
        /* 顶部区域左侧 欢迎登录 样式设置 */
        .header .headerLeft .headerLogo b{
            display: block;
            width: 110px;
            height: 40px;
            background: url('https://misc.360buyimg.com/user/passport/1.0.0/css/i/l-icon.png') no-repeat;
            float: right;
            margin-top: 20px;
        }
        /* 顶部区域右侧的样式 */
        .header .headerRight{
            float: right;
            margin-right: 265px;
            margin-top: 48px;
        }
        /* 顶部区域的右侧 调查问卷链接的样式 */
        .header .headerRight a{
            font-size: 12px;
            color: #999;
        }
        /* 顶部区域的右侧 调查问卷 图标的样式 */
        .header .headerRight a b{
            display: inline-block;
            width: 18px;
            height: 14px;
            margin: 0 5px;
            background: url('https://misc.360buyimg.com/user/passport/1.0.0/css/i/q-icon.png') no-repeat;
            overflow: hidden;
            vertical-align: middle;
        }
        /* 内容区域的样式 */
        .content{
            height: 520px;
            width: 1520px;
            background-color: blue;
            margin: 0 auto 15px auto;
        }
        /* 内容区域头部的样式 */
        .content .contentTop{
            height: 40px;
            background-color: #fff8f0;
        }
        /* 内容区域头部中间部分的样式 */
        .content .contentTop .contentTopMid{
            height: 18px;
            width: 1300px;
            text-align: center;
            display: inline-block;
            margin-top: 10px;
            margin-left: 110px;
            font-size: 12px;
            color: #999;
        }
        /* 提示图标的样式 */
        .icon-tips{
            height: 16px;
            width: 16px;
            background-image: url('https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/icon-tips.png');
            display: inline-block;
            margin-right: 5px;
            vertical-align: middle;
        }
        /* 提示信息类名为tips的p标签的样式 */
        .tips{
            display: inline-block;
        }
        /* 内容区域中间内容样式 */
        .content .middle{
            height: 480px;
            width: 1520px;
            background-color: #910F35;
        }
        /* 内容区域中间的登录背景样式 */
        .content .middle .middleLogin{
            height: 480px;
            width: 1000px;
            background-image: url('https://img1.360buyimg.com/pop/jfs/t1/176819/16/18146/99250/610d1612Ede626730/0a1aeaf9766f3b55.jpg');
            background-repeat: no-repeat;
            margin: 0 auto;
        }
        /* 登录框的样式 */
        .content .middle .middleLogin .login{
            height: 400px;
            width: 350px;
            background-color: white;
            float: right;
            margin-top: 10px;
        }
        /* 登录框的头部样式 */
        .content .middle .middleLogin .login .loginTop{
            height: 40px;
            width: 350px;
            background-color: #fff8f0;
        }
        /* 登录框的头部内容样式 */
        .content .middle .middleLogin .login .loginTop .loginTopMid{
            height: 20px;
            width: 350px;
            color: #999;
            font-size: 12px;
            display: inline-block;
            text-align: center;
            margin-top: 10px;
        }
        /* 登录框的扫码登录/账户登录样式 */
        .content .middle .middleLogin .login .loginTabL,.content .middle .middleLogin .login .loginTabR{
            height: 55px;
            width: 175px;
            color: #666;
            font-size: 18px;
            text-align: center;
            border-bottom: 1px solid #f4f4f4;
            float: left;
        }
        /* 登录框的扫码登录/账户登录中a标签的样式 */
        .content .middle .middleLogin .login .loginTabL a,.content .middle .middleLogin .login .loginTabR a{
            height: 18px;
            width: 174px;
            border-right: 1px solid #f4f4f4;
            display: block;
            margin-top: 17px;
        }
        /* 登录框中的 账号登录 选中为红 */
        .content .middle .middleLogin .login .loginTabR a{
            color: #E4393C;
            font-weight: bold;
        }
        .wrap{
            clear: both;
        }
        /* 登录表单的样式 */
        .loginForm .loginAcount,.loginForm .loginPassword{
            height: 38px;
            width: 304px;
            border: 1px solid #bdbdbd;
            margin: 35px auto 20px auto;
        }
        /* 登录表单中标签的样式 */
        .loginLabel{
            height: 38px;
            width: 38px;
            border-right: 1px solid #bdbdbd;
            /* background-color: #bdbdbd; */
            float: none;
            display: inline-block;
            background: url('https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png') no-repeat;
        }
        /* 登录表单中密码标签的样式 */
        .loginForm .loginLabelPwd{
            background-position: -48px 0;
        }
        /* 登录表单中input输入框的样式 */
        #loginname,#loginpwd{
            line-height: 18px;
            height: 18px;
            width: 254px;
            padding: 10px 0 10px 0px;
            border: 0;
            float: right;
            overflow: hidden;
            font-size: 14px;
            /* 取消选中的样式 */
            outline: none;
        }
        /* 登录表单中忘记密码的样式 */
        .loginForm .forget{
            height: 18px;
            width: 330px;
            color: #666;
            font-size: 12px;
        }
        /* 登录表单的忘记密码a标签的样式 */
        .loginForm .forget a{
            float: right;
        }
        /* 登录表单中登录按钮的样式 */
        .loginForm .loginButton{
            height: 32px;
            width: 302px;
            border: 1px solid red;
            margin: 0 auto;
            text-align: center;
        }
        /* 登录表单中登录按钮a标签的样式 */
        .loginForm .loginButton a{
            border: 1px solid #e85356;
            display: block;
            height: 31px;
            width: 302px;
            background-color: #e4393c;
            line-height: 31px;
            color: #fff;
            font-size: 20px;
        }
        /* 登录框中的底部样式 */
        .login .loginbottom{
            padding-left: 20px;
            padding-right: 20px;
            line-height: 50px;
            border-top: 1px solid #f4f4f4;
            height: 50px;
            margin-top: 30px;
            background-color: #fcfcfc;
        }
        /* 登录框底部无序列表 QQ、微信的样式 */
        .login .loginbottom ul li{
            float: left;
            list-style: none;
            font-size: 12px;
        }
        /* 登录框底部QQ、微信图标的样式 */
        .login .loginbottom ul li b{
            height: 18px;
            width: 19px;
            background: url('https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/QQ-weixin.png') no-repeat;
            float: left;
            margin-top: 17px;
            margin-right: 5px;
        }
        /* 登录框底部微信图标的背景图片的位置设置 */
        .login .loginbottom ul li .weixin-icon{
            background-position: -20px 0;
        }
        /* 登录框中 QQ和微信之间的 | 样式 */
        .login .loginbottom ul li .line{
            color: #CCC;
            margin: 0 10px;
        }
        /* 登录框底部的立即注册样式 */
        .login .loginbottom .register{
            height: 50px;
            width: 80px;
            float: right;
            color: #b61d1d;
            font-size: 14px;
        }
        /* 登录框底部的立即注册图标的样式 */
        .login .loginbottom .register b{
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url('https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png') -104px -75px no-repeat;
            vertical-align: middle;
            margin-right: 5px;
        }
        /* 立即注册的a标签的颜色设置 */
        .login .loginbottom .register a{
            color: #b61d1d;
        }
        /* 底部区域的样式 */
        .footer{
            height: 55px;
            width: 1000px;
            margin: 0 auto;
            text-align: center;
            padding-bottom: 30px;
            font-size: 12px;
        }
        /* 底部链接的样式 */
        .footer a{
            color: #666;
            margin: 0 10px;
        }
        .footer .footerBottom{
            margin: 10px 0;
            color: #666;
        }
    </style>
</head>
<body>
    <!-- 顶部区域开始 -->
    <div class="header">
        <!-- 顶部区域的左侧 -->
        <div class="headerLeft">
            <!-- 顶部区域的左侧logo -->
            <div class="headerLogo">
                <a href="https://www.jd.com/" target="_blank">
                    <img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" alt="京东" width="170px" height="60px">
                </a>
                <!-- b为欢迎登录背景图 -->
                <b></b>
            </div>
        </div>
        <!-- 顶部区域的右侧 -->
        <div class="headerRight">
            <a href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans" target="_blank">
                <b></b>登录页面，调查问卷</a>
        </div>
    </div>
    <!-- 顶部区域结束 -->
    <!-- 内容区域开始 -->
    <div class="content">
        <!-- 内容区域的顶部开始 -->
        <div class="contentTop">
            <div class="contentTopMid">
                <!-- i为提示的图标 -->
                <i class="icon-tips"></i>
                <p class="tips">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版
                    <a href="https://about.jd.com/privacy/" target="_blank">《京东隐私政策》</a>
                已上线，将更有利于保护您的个人隐私。
                </p>
            </div>
        </div>
        <!-- 内容区域的顶部结束 -->
        <!-- 内容区域的中间内容开始 -->
        <div class="middle">
            <!-- 内容区域的中间  背景图片 + 登录框 -->
            <div class="middleLogin">
                <!-- 登录框的开始 -->
                <div class="login">
                    <div class="loginTop">
                        <!-- 登录框顶部的信息 -->
                        <div class="loginTopMid">
                            <i class="icon-tips"></i>
                            <p class="tips">京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
                        </div>
                    </div>
                    <!-- 登录框的两种登录方式 -->
                    <div class="loginTabL">
                        <a href="javascript:">扫码登录</a>
                    </div>
                    <div class="loginTabR">
                        <a href="javascript:">账户登录</a>
                    </div>
                    <div class="wrap"></div>
                    <div class="loginForm">
                        <!-- 登录账号密码的输入框 -->
                        <div class="loginAcount">
                            <label for="loginname" class="loginLabel"></label>
                            <input id="loginname" type="text" autocomplete="off" placeholder="邮箱/用户名/登录手机">
                        </div>
                        <div class="loginPassword">
                            <label for="loginpwd" class="loginLabel loginLabelPwd"></label>
                            <input id="loginpwd" type="password" autocomplete="off" placeholder="密码">
                        </div>
                        <!-- 忘记密码 -->
                        <div class="forget">
                            <a href="https://aq.jd.com/process/findPwd?s=1" target="_blank">忘记密码</a>
                        </div>
                        <!-- 登录按钮 -->
                        <div class="loginButton">
                            <a href="javascript:">登&nbsp;&nbsp;&nbsp;&nbsp;录</a>
                        </div>
                    </div>
                    <!-- 登录底部 QQ 微信 立即注册 -->
                    <div class="loginbottom">
                        <ul>
                            <li>
                                <a href="javascript:">
                                    <b class="QQ-icon"></b>
                                    <span>QQ</span>
                                </a>
                                <span class="line">|</span>
                            </li>
                            <li>
                                <a href="javascript:">
                                    <b class="weixin-icon"></b>
                                    <span>微信</span>
                                </a>
                            </li>
                            <li></li>
                        </ul>
                        <div class="register">
                            <a href="https://reg.jd.com/p/regPage?ignore=1" target="_blank">
                            <b></b>立即注册
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 登录框的结束 -->
            </div>
        </div>
        <!-- 内容区域的中间内容结束 -->
    </div>
    <!-- 内容区域结束 -->
    <!-- 底部区域开始 -->
    <div class="footer">
        <!-- 底部链接栏 -->
        <div class="footerlinks">
            <a href="https://about.jd.com/" target="_blank">关于我们</a>|
            <a href="https://about.jd.com/contact" target="_blank">联系我们</a>|
            <a href="https://zhaopin.jd.com/home;jsessionid=973E45DC3CB7979F5CDB1D1A776B0656.s1" target="_blank">人才招聘</a>|
            <a href="https://lai.jd.com/" target="_blank">商家入驻</a>|
            <a href="https://jzt.jd.com/gw/?ReturnUrl=https%3A%2F%2Fjzt.jd.com%2Fhome%2F%23%2Findex" target="_blank">广告服务</a>|
            <a href="https://app.jd.com/" target="_blank">手机京东</a>|
            <a href="https://about.jd.com/" target="_blank">友情链接</a>|
            <a href="https://about.jd.com/" target="_blank">销售联盟</a>|
            <a href="https://about.jd.com/" target="_blank">京东社区</a>|
            <a href="https://about.jd.com/" target="_blank">京东公益</a>|
            <a href="https://about.jd.com/" target="_blank">English Site</a>|
        </div>
        <!-- 版权 -->
        <div class="footerBottom">
            Copyright&nbsp;&copy;&nbsp;2004-2021&nbsp;&nbsp;京东JD.com&nbsp;版权所有
        </div>
    </div>
    <!-- 底部区域结束 -->
</body>
</html>